import { App, Modal, Plugin, Setting, Notice } from 'obsidian';
import { FlomoImporter } from './importer';
import { createExpOpt } from './utils';


export class ImporterUI extends Modal {
    plugin: Plugin;
    // rawPath: string;

    constructor(app: App, plugin: Plugin) {
        super(app);
        this.plugin = plugin;
        // this.rawPath = "";
    }

    async onSubmit(): Promise<void> {
        //@ts-ignore
        // const targetMemoLocation = this.plugin.settings.flomoTarget + "/" + this.plugin.settings.memoTarget;
        //
        // const res = await this.app.vault.adapter.exists(targetMemoLocation);
        // if (!res) {
        //     console.debug(`DEBUG: creating memo root -> ${targetMemoLocation}`);
        //     await this.app.vault.adapter.mkdir(`${targetMemoLocation}`);
        // }

        try {
            //@ts-ignore
            const config = this.plugin.settings;
            // config["rawDir"] = "D:/projects/obsidian_plugins/jimmymo-plugins/obsidian-flomo-importer/" + this.rawPath;
            // config["rawDir"] = this.rawPath;
            //@ts-ignore
            config["rawDir"] = this.plugin.settings.rawPath;

            const flomo = await (new FlomoImporter(this.app, config)).import();

            new Notice(`🎉 Done.\nProcessed Total: ${flomo.memos.length} memos`)
            // this.rawPath = "";


        } catch (err) {
            // this.rawPath = "";
            console.log(err);
            new Notice(`Flomo Importer Error. Details:\n${err}`);
        }
    }

    onOpen() {

        const { contentEl } = this;
        contentEl.empty();
        contentEl.createEl("h3", { text: "Flomo Importer" });

        new Setting(contentEl)
          .setName('Start Date')
          .setDesc('Start date')
          .addText(text => text
            .setPlaceholder('start date')
            //@ts-ignore
            .setValue(this.plugin.settings.startDate)
            .onChange(async (value) => {
                //@ts-ignore
                this.plugin.settings.startDate = value;
            }));

        new Setting(contentEl)
          .setName('End Date')
          .setDesc('End date')
          .addText(text => text
            .setPlaceholder('end date')
            //@ts-ignore
            .setValue(this.plugin.settings.endDate)
            .onChange(async (value) => {
                //@ts-ignore
                this.plugin.settings.endDate = value;
            }));

        new Setting(contentEl)
            .setName('File Path')
            .setDesc('File path')
            .addText(text => text
                .setPlaceholder('file path')
                //@ts-ignore
                .setValue(this.plugin.settings.rawPath)
                .onChange(async (value) => {
                    // this.rawPath = value;
                    //@ts-ignore
                    this.plugin.settings.rawPath = value;
                }));

        // const fileLocContol: HTMLInputElement = contentEl.createEl("input", { type: "file", cls: "uploadbox" })
        // fileLocContol.setAttr("accept", ".zip");
        // fileLocContol.onchange = (ev) => {
        //     //@ts-ignore
        //     this.rawPath = ev.currentTarget.files[0]["name"];
        //     console.log(this.rawPath)
        // };

        contentEl.createEl("br");
        new Setting(contentEl)
          .setName('Index Html File Name')
          .setDesc('Index Html File Name')
          .addText(text => text
            .setPlaceholder('jocundmo的笔记.html')
            //@ts-ignore
            .setValue(this.plugin.settings.indexFilename)
            .onChange(async (value) => {
                //@ts-ignore
                this.plugin.settings.indexFilename = value;
            }));

        new Setting(contentEl)
          .setName('Checksum file path')
          .setDesc('Checksum file path')
          .addText(text => text
            .setPlaceholder('')
            //@ts-ignore
            .setValue(this.plugin.settings.checksumFilePath)
            .onChange(async (value) => {
                //@ts-ignore
                this.plugin.settings.checksumFilePath = value;
            }));
        // new Setting(contentEl)
        //     .setName('Flomo Root Location')
        //     .setDesc('set the flomo root location')
        //     .addText(text => text
        //         .setPlaceholder('flomo')
        //         //@ts-ignore
        //         .setValue(this.plugin.settings.flomoTarget)
        //         .onChange(async (value) => {
        //             //@ts-ignore
        //             this.plugin.settings.flomoTarget = value;
        //         }));
        //
        // new Setting(contentEl)
        //     .setName('Memo Location')
        //     .setDesc('set the location to store memos (under Flomo Root)')
        //     .addText((text) => text
        //         .setPlaceholder('memos')
        //         //@ts-ignore
        //         .setValue(this.plugin.settings.memoTarget)
        //         .onChange(async (value) => {
        //             //@ts-ignore
        //             this.plugin.settings.memoTarget = value;
        //         }));

        // new Setting(contentEl)
        //     .setName('Moments Options')
        //     .setDesc('set moments style: flow(default) | skip')
        //     .addDropdown((drp) => {
        //         drp.addOption("copy_with_link", "Generate Moments")
        //             .addOption("skip", "Skip Moments")
        //           //@ts-ignore
        //             .setValue(this.plugin.settings.optionsMoments)
        //             .onChange(async (value) => {
        //                 //@ts-ignore
        //                 this.plugin.settings.optionsMoments = value;
        //             })
        //     })

//         new Setting(contentEl)
//             .setName('Canvas Options')
//             .setDesc('set canvas options: link | content(default) | skip')
//             .addDropdown((drp) => {
//                 drp.addOption("copy_with_link", "Generate Canvas")
//                     .addOption("copy_with_content", "Generate Canvas (with content)")
//                     .addOption("skip", "Skip Canvas")
//                   //@ts-ignore
//                     .setValue(this.plugin.settings.optionsCanvas)
//                     .onChange(async (value) => {
//                         //@ts-ignore
//                         this.plugin.settings.optionsCanvas = value;
//                     })
//             });
//
//         const canvsOptionBlock: HTMLDivElement = contentEl.createEl("div", { cls: "canvasOptionBlock" });
//
//         const canvsOptionLabelL: HTMLLabelElement = canvsOptionBlock.createEl("label");
//         const canvsOptionLabelM: HTMLLabelElement = canvsOptionBlock.createEl("label");
//         const canvsOptionLabelS: HTMLLabelElement = canvsOptionBlock.createEl("label");
//
//         const canvsSizeL: HTMLInputElement = canvsOptionLabelL.createEl("input", { type: "radio", cls: "ckbox" });
//         canvsOptionLabelL.createEl("small", { text: "large" });
//         const canvsSizeM: HTMLInputElement = canvsOptionLabelM.createEl("input", { type: "radio", cls: "ckbox" });
//         canvsOptionLabelM.createEl("small", { text: "medium" });
//         const canvsSizeS: HTMLInputElement = canvsOptionLabelS.createEl("input", { type: "radio", cls: "ckbox" });
//         canvsOptionLabelS.createEl("small", { text: "small" });
//
//         canvsSizeL.name = "canvas_opt";
//         canvsSizeM.name = "canvas_opt";
//         canvsSizeS.name = "canvas_opt";
// //@ts-ignore
//         switch (this.plugin.settings.canvasSize) {
//             case "L":
//                 canvsSizeL.checked = true;
//                 break
//             case "M":
//                 canvsSizeM.checked = true;
//                 break
//             case "S":
//                 canvsSizeS.checked = true;
//                 break
//         }
//
//         canvsSizeL.onchange = (ev) => {
//             //@ts-ignore
//             this.plugin.settings.canvasSize = "L";
//         };
//
//         canvsSizeM.onchange = (ev) => {
//             //@ts-ignore
//             this.plugin.settings.canvasSize = "M";
//         };
//
//         canvsSizeS.onchange = (ev) => {
//             //@ts-ignore
//             this.plugin.settings.canvasSize = "S";
//         };

        // new Setting(contentEl).setName('Experimental Options').setDesc('set experimental options')

        // const allowBiLink = createExpOpt(contentEl, "Convert bidirectonal link. example: [[abc]]")
        // //@ts-ignore
        // allowBiLink.checked = this.plugin.settings.expOptionAllowbilink;
        // allowBiLink.onchange = (ev) => {
        //     //@ts-ignore
        //     this.plugin.settings.expOptionAllowbilink = ev.currentTarget.checked;
        // };

        // const mergeByDate  = createExpOpt(contentEl, "Merge memos by date")
        // //@ts-ignore
        // mergeByDate.checked = this.plugin.settings.mergeByDate;
        // mergeByDate.onchange = (ev) => {
        //     //@ts-ignore
        //     this.plugin.settings.mergeByDate = ev.currentTarget.checked;
        // };

        new Setting(contentEl)
            .addButton((btn) => {
                btn.setButtonText("Cancel")
                    .setCta()
                    .onClick(async () => {
                        //@ts-ignore
                        await this.plugin.saveSettings();
                        this.close();
                    })
            })
            .addButton((btn) => {
                btn.setButtonText("Import")
                    .setCta()
                    .onClick(async () => {
                        //@ts-ignore
                        if (this.plugin.settings.rawPath != "") {
                            await this.onSubmit();
                            //@ts-ignore
                            await this.plugin.saveSettings();
                            this.close();
                        }
                        else {
                            new Notice("No File Selected.")
                        }
                    })
            });

    }

    onClose() {
        // this.plugin.settings.rawPath = "";
        const { contentEl } = this;
        contentEl.empty();
    }
}
